<!--
 * 图标
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-icon" :class="classes" :style="styles" :hover-class="hoverClass" @tap="handleClick">
        <!-- 字体图标 -->
        <view class="pure-icon-iconfont" :class="iconfontClasses" v-if="!isImage"></view>

        <!-- 图片图标 -->
        <image class="pure-icon-image" :src="name" :mode="mode" v-else></image>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props,
        emits: ["onClick"],
        computed: {
            // classes
            classes() {
                const classes = [];

                // 禁用
                if (this.disabled) classes.push(this.disabledClass);

                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },

            // 图标名称（类名）
            iconfontClasses() {
                const classes = [];

                //  图片图标
                if (this.isImage) return classes;

                //  内置字体图标
                if (this.name.startsWith("__")) {
                    classes.push(`pure-iconfont pure-iconfont${this.name}`);
                    return classes;
                }

                //  扩展字体图标
                classes.push(this.name);

                return classes;
            },

            // 是否为图片图标
            isImage() {
                return this.name?.includes("/");
            },
        },
        methods: {
            // 点击事件
            handleClick() {
                // 禁用了
                if (this.disabled) return;

                this.$emit("onClick");
            },
        },
    };
</script>

<style scoped>
    @import "./iconfont.css";
    @import "./style.css";
</style>
